<template>
    <div class="container">
        <div class="app-body">
            <div class="header">
                <div class="header_title">
                    <div class="circle"></div>
                    <p>我的工资</p>
                </div>
                <div class="header_top">
                    <div class="totalWage">
                        <p class="pTip">4月份工资&nbsp; (元)</p>
                        <div class="total_box"><span>6666.66</span><img src="../../assets/icon/onoticeIcon1.png" alt="">
                        </div>
                        <div class="total_bottom">
                            <div class="depart_box flexCenter">
                                <img src="../../assets/icon/onoticeIcon1.png" alt="">
                                <div>
                                    <p class="p1">部门</p>
                                    <p class="p2">编外</p>
                                </div>
                                <div class="xian"></div>
                            </div>
                            <div class="depart_box flexCenter">
                                <img src="../../assets/icon/onoticeIcon1.png" alt="">
                                <div>
                                    <p class="p1">部门</p>
                                    <p class="p2">在职人员</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="detailWage">
                        <div class="publish">
                            <img src="../../assets/excel.png" alt="">
                            <div>
                                <p class="p3">应发</p>
                                <p class="p4">9999.99 元</p>
                            </div>
                        </div>
                        <div class="wageDetail">
                            <div class="wageDetail_li" v-for="item in 15">
                                <p class="pName">岗位工资</p>
                                <p class="pWage">9999元</p>
                            </div>
                            <div class="v_line"></div>
                        </div>
                    </div>
                    <div class="detailWage">
                        <div class="publish">
                            <img src="../../assets/excel.png" alt="">
                            <div>
                                <p class="p3">应发</p>
                                <p class="p4">9999.99 元</p>
                            </div>
                        </div>
                        <div class="wageDetail">
                            <div class="wageDetail_li" v-for="item in 15">
                                <p class="pName">岗位工资</p>
                                <p class="pWage">9999元</p>
                            </div>
                            <div class="v_line"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main">
                <div class="main_left">
                    <div class="main_left_draw"></div>
                    <div class="monthBtn">4月份工资</div>
                    <div class="monthTip">工资饼图</div>
                </div>
                <div class="main_right">
                    <div class="main_right_draw"></div>
                    <div class="main_rightBtn">4月份工资</div>
                    <div class="main_rightTip">工资饼图</div>
                </div>
            </div>
            <div class="bottom">
                <div class="bottom_l">
                    <div class="bottom_title">社保</div>
                    <div class="bottom_l_draw"></div>
                </div>
                <div class="bottom_c">
                    <div class="bottom_title">公积金</div>
                    <div class="bottom_c_draw"></div>
                </div>
                <div class="bottom_r">
                    <div class="bottom_title">社保</div>
                    <div class="bottom_r_draw"></div>
                </div>
            </div>
        </div>
        <bottomView />
    </div>
</template>
<script>
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import bottomView from "@/components/bottom.vue";
import * as echarts from 'echarts';

export default {
    name: "classTeacherList",
    data() {
        return {
            total: 0,
            list: [],
        };
    },
    components: {
        bottomView,
    },
    setup() {
        return {
            locale: zhCn,
        };
    },
    mounted() {
        this.getMyWage()
        this.getCake()
        // this.getWageDraw()
        this.getEcharts()
        this.getEcharts1()
        this.getEcharts2()
        this.getEcharts3()
    },
    computed: {

    },
    methods: {
        getMyWage() {
            httpService(
                "/javaApi/baseWage/myListForMobile",
                { pageYear: 2024 },
                "get"
            ).then((data) => {
                console.log(123123123, data);
            })
        },


        getCake() {
            var chartDom = document.querySelector('.main_left_draw');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                // title: {
                //     text: 'Referer of a Website',
                //     subtext: 'Fake Data',
                //     left: 'center'
                // },
                tooltip: {
                    trigger: 'item',
                    textStyle: {
                        fontSize: 14
                    },
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    textStyle: {
                        fontSize: 10
                    },
                    top: '15%',
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '75%',
                        center: ['60%', '55%'],
                        position: '20px',

                        data: [
                            { value: 1048, name: '岗位工资' },
                            { value: 735, name: '薪级工资' },
                            { value: 580, name: '基础性绩效工资' },
                            { value: 484, name: '养老保险' },
                            { value: 300, name: '失业补贴' }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    fontSize: 10
                                }
                            },
                            emphasis: {
                                show: true
                            }
                        },

                    }
                ],
                grid: {
                },
            };

            option && myChart.setOption(option);
        },
        getWageDraw() {
            var chartDom = document.querySelector('.main_right_draw');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        length: "none", // 调整刻度线的长度
                        interval: 'auto' // 设置为 'auto' 或者一个数字，控制标签的显示间隔
                    },
                    // axisLabel: {
                    //     interval: function (index, value) {
                    //         // 自定义判断条件，使得标签位于两个刻度之间显示
                    //         return index % 2 === 1; // 每隔一个刻度显示一个标签
                    //     }
                    // },
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '30%'],
                    axisLabel: {
                        margin: 20 // 设置刻度标签与坐标轴的距离
                    },
                    axisLine: {
                        show: true, // 显示 Y 轴实线
                        lineStyle: {
                            color: '#333', // 实线颜色
                            width: 1 // 实线宽度
                        }
                    },
                },
                visualMap: {
                    type: 'piecewise',
                    show: false,
                    dimension: 0,
                    seriesIndex: 0,
                    pieces: [
                        {
                            gt: 1,
                            lt: 3,
                            color: 'rgba(0, 0, 180, 0.4)'
                        },
                        {
                            gt: 5,
                            lt: 7,
                            color: 'rgba(0, 0, 180, 0.4)'
                        }
                    ],
                },

                series: [
                    {
                        type: 'line',
                        smooth: 0.6,
                        symbol: 'none',
                        lineStyle: {
                            color: '#5470C6',
                            width: 5
                        },
                        // markLine: {
                        //     symbol: ['none', 'none'],
                        //     label: { show: false },
                        //     data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
                        // },
                        // areaStyle: {
                        //     color: 'rgba(0, 0, 255, 0.3)',// 填充区域颜色
                        //     left: 20,
                        // },
                        areaStyle: {},
                        data: [
                            ['2019-10-10', 200],
                            ['2019-10-11', 560],
                            ['2019-10-12', 750],
                            ['2019-10-13', 580],
                            ['2019-10-14', 250],
                            ['2019-10-15', 300],
                            ['2019-10-16', 450],
                            ['2019-10-17', 300],
                            ['2019-10-18', 100]
                        ],
                    }
                ],
                grid: {
                    left: '70px',
                    // top: '10%',
                    right: '50px',
                    bottom: '35px',
                },
            };

            option && myChart.setOption(option);

        },
        getEcharts() {
            var chartDom = document.querySelector('.main_right_draw');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                xAxis: {
                    type: 'category',
                    // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        // data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        smooth: true,
                        symbol: 'none', // 设置折线上的标记样式为 "none"
                        lineStyle: {
                            width: 4 // 设置折线的宽度为2像素
                        },
                        areaStyle: {
                            color: 'rgba(0, 0, 255, 0.3)',// 填充区域颜色
                        },
                        data: [
                            ['2019-10-10', 200],
                            ['2019-10-11', 560],
                            ['2019-10-12', 750],
                            ['2019-10-13', 580],
                            ['2019-10-14', 250],
                            ['2019-10-15', 300],
                            ['2019-10-16', 450],
                            ['2019-10-17', 300],
                            ['2019-10-18', 100]
                        ],
                    }

                ]
            };

            option && myChart.setOption(option);
        },
        getEcharts1() {
            var chartDom = document.querySelector('.bottom_l_draw');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                xAxis: {
                    type: 'category',
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        type: 'line',
                        smooth: true,
                        symbol: 'none', // 设置折线上的标记样式为 "none"
                        lineStyle: {
                            width: 4 // 设置折线的宽度为2像素
                        },
                        areaStyle: {
                            color: 'rgba(0, 0, 255, 0.3)',// 填充区域颜色
                        },
                        data: [
                            ['2019-10-10', 200],
                            ['2019-10-11', 560],
                            ['2019-10-12', 750],
                            ['2019-10-13', 580],
                            ['2019-10-14', 250],
                            ['2019-10-15', 300],
                            ['2019-10-16', 450],
                            ['2019-10-17', 300],
                            ['2019-10-18', 100]
                        ],
                    }

                ]
            };

            option && myChart.setOption(option);
        },
        getEcharts2() {
            var chartDom = document.querySelector('.bottom_c_draw');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                xAxis: {
                    type: 'category',
                    // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        // data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        smooth: true,
                        symbol: 'none', // 设置折线上的标记样式为 "none"
                        lineStyle: {
                            width: 4 // 设置折线的宽度为2像素
                        },
                        areaStyle: {
                            color: 'rgba(0, 0, 255, 0.3)',// 填充区域颜色
                        },
                        data: [
                            ['2019-10-10', 200],
                            ['2019-10-11', 560],
                            ['2019-10-12', 750],
                            ['2019-10-13', 580],
                            ['2019-10-14', 250],
                            ['2019-10-15', 300],
                            ['2019-10-16', 450],
                            ['2019-10-17', 300],
                            ['2019-10-18', 100]
                        ],
                    }

                ]
            };

            option && myChart.setOption(option);
        },
        getEcharts3() {
            var chartDom = document.querySelector('.bottom_r_draw');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                xAxis: {
                    type: 'category',
                    // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        // data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        smooth: true,
                        symbol: 'none', // 设置折线上的标记样式为 "none"
                        lineStyle: {
                            width: 4 // 设置折线的宽度为2像素
                        },
                        areaStyle: {
                            color: 'rgba(0, 0, 255, 0.3)',// 填充区域颜色
                        },
                        data: [
                            ['2019-10-10', 200],
                            ['2019-10-11', 560],
                            ['2019-10-12', 750],
                            ['2019-10-13', 580],
                            ['2019-10-14', 250],
                            ['2019-10-15', 300],
                            ['2019-10-16', 450],
                            ['2019-10-17', 300],
                            ['2019-10-18', 100]
                        ],
                    }

                ]
            };

            option && myChart.setOption(option);
        },

    },
};
</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
}

.container {
    background: #eff3f5;
    padding: 5px 10px 10px;
}

.app-body {
    background: #eff3f5;
    margin-bottom: 10px;
    min-height: calc(100vh - 207px);
}

.flexCenter {
    display: flex;
    align-items: center;
}

.header {
    margin: 0 5px 10px 0;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;
}

.header_title {
    display: flex;
    align-items: center;
    color: #000000;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
}

.circle {
    width: 6px;
    height: 6px;
    background-color: #2960FF;
    border-radius: 3px;
    margin-right: 7px;
}

.header_top {
    /* background-color: bisque; */
    display: flex;
}

.totalWage {
    width: calc(28% - 180px);
    height: 150px;
    background-color: #1f82f9;
    margin-right: 20px;
    border-radius: 15px;
}


.totalWage {
    padding: 15px;
    height: 161px;
}

.pTip {
    color: #fff;
    font-size: 14px;
}

.total_box {
    font-size: 29px;
    color: #fff;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.total_box img {
    width: 20px;
    height: 20px;
    margin-left: 10px;
}

.total_bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
}

.depart_box {
    width: 45%;
    position: relative;
}

.depart_box .xian {
    width: 1px;
    height: 70%;
    border-right: 1px solid #fff;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.depart_box img {
    width: 34px;
    height: 34px;
    margin-right: 11px;
}

.depart_box div .p1 {
    color: #A1C0FF;
    font-size: 12px;
}

.depart_box div .p2 {
    color: #fff;
    font-size: 14px;
}





.detailWage {
    width: 36%;
    height: 171px;
    margin-right: 20px;
    padding: 8px;
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
    border: 2px solid #E2E2E2;
    /* box-sizing: border-box; */
}



.publish {
    height: 100%;
    width: 134px;
    border-radius: 10px;
    background-color: bisque;
    text-align: center;
}

.publish img {
    width: 45px;
    margin: 33px 0;
}

.publish .p3 {
    color: #999;
    font-size: 14px;
}

.publish .p4 {
    color: #333;
    font-size: 18px;
    font-weight: bold;
}

.wageDetail {
    width: calc(100% - 135px);
    height: calc(100%- 50px);
    padding: 20px 26px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}

.wageDetail .v_line {
    width: 1px;
    height: calc(100% - 40px);
    background-color: #CCC;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wageDetail_li {
    width: 40%;
    display: flex;
    justify-content: space-between;
    line-height: 18px;
}

.wageDetail_li .pName {
    color: #999;
    font-size: 12px;
}

.wageDetail_li .pWage {
    color: #000;
    font-size: 12px;
}

.main {
    height: 270px;
    margin: 20px 5px 20px 0;
    display: flex;
    justify-content: space-between;

}

.main_left {
    background-color: #fff;
    width: calc(30% - 64px);
    height: 230px;
    border-radius: 5px;
    /* background-color: beige; */
    padding: 20px;
    position: relative;
}

.main_left_draw {
    width: 100%;
    height: 100%;
}

.main_left .monthBtn {
    position: absolute;
    top: 14px;
    right: 18px;
    z-index: 999999;
    width: 96px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: linear-gradient(to bottom, #099EFD, #2960FF);
    border-radius: 20px;
    color: #fff;
    font-size: 14px;
    box-shadow: 4px 4px 5px hsla(0, 0%, 0%, 0.25);
}

.monthTip {
    position: absolute;
    top: 15px;
    left: 20px;
    color: #000;
    font-weight: bold;
}

.main_right {
    width: 70%;
    height: 270px;
    background-color: #fff;
    border-radius: 5px;
    position: relative;
}

.main_right_draw {
    width: 100%;
    height: 100%;
}

.main_rightBtn {
    position: absolute;
    top: 15px;
    right: 20px;

}

.main_rightTip {
    position: absolute;
    top: 15px;
    left: 20px;
}

.bottom {
    margin-right: 5px;
    display: flex;

}

.bottom_l,
.bottom_c,
.bottom_r {
    width: calc((100% - 40px) / 3);
    height: 200px;
    border-radius: 5px;
    position: relative;
    background-color: #fff;
}

.bottom_l {
    margin-right: 20px;
}

.bottom_c {
    margin-right: 20px;
}

.bottom_r {}

.bottom_title {
    position: absolute;
    top: 15px;
    left: 20px;
}

.bottom_l_draw,
.bottom_c_draw,
.bottom_r_draw {
    width: 100%;
    height: 100%;
}
</style>
